<template>
    <div>
        <Form ref="formInline"
              inline>
            <Form-item prop="user">
                <Input type="text"
                       v-model="ex"
                       placeholder="请输入交易所">
                </Input>
            </Form-item>
            <Form-item prop="user">
                <Input type="text"
                       v-model="coin"
                       placeholder="请输入币种">
                </Input>
            </Form-item>
            <Form-item>
                <Button type="primary"
                        @click="handleSearch">搜索</Button>
            </Form-item>
        </Form>
        <Table width="800"
               height="800"
               border
               :columns="columns"
               :data="data"
               style="margin:auto;"
               :row-class-name="rowClassName"></Table>
    </div>
</template>
<script>
export default {
    data () {
        return {
            columns: [
                {
                    title: '交易所',
                    key: 'exName',
                    fixed: 'left'
                },
                {
                    title: '币种',
                    key: 'coin',
                    fixed: 'left',
                    className: 'symbol-column'
                },
                {
                    title: '充币',
                    key: 'despoit',
                },
                {
                    title: '提币',
                    key: 'withdraw',
                }
            ],
            data: [],
            coin: '',
            ex: ''
        }
    },
    created () {
        this.handleLoad()
    },
    methods: {
        handleLoad () {
            const key = this.coin || 'key'
            const ex = this.ex || 'okex'
            
            let development = process.env.NODE_ENV == 'development' ? true : false;
            console.log(development)
            let baseUrl = `/exs/v1/getCloseCoin?ex=${ex}&key=${key}`
            if (!development) {
                baseUrl = `http://211.159.186.180:9090/exs/v1/getCloseCoin?ex=${ex}&key=${key}`
            }
            this.$axios({
                method:'get',
                url: baseUrl
            }).then((res) =>{          
                const data = []
                res.data.forEach((item) => {
                    item.cellClassName = {
                        withdraw: '',
                        despoit: ''
                    }
                    item.cellClassName.withdraw = item.withdraw ? 'green-color' : 'red-color'
                    item.cellClassName.despoit = item.despoit ? 'green-color' : 'red-color'
                    data.push(item)
                })
                this.data = data
            })
        },
        rowClassName (row, index) {
            console.log(row)
            return ''
        },
        handleSearch () {
            if (!this.coin) {
                this.handleLoad()
                return
            }
            const key = this.coin || 'key'
            const ex = this.ex || 'okex'
            
            let development = process.env.NODE_ENV == 'development' ? true : false;
            let baseUrl = `/exs/v1/getCoinStatus?ex=${ex}&coin=${key}&key=key`
            if (!development) {
                baseUrl = `http://211.159.186.180:9090/exs/v1/getCoinStatus?ex=${ex}&coin=${key}&key=key`
            }
            this.$axios({
                method:'get',
                url: baseUrl
            }).then((res) =>{          
                this.data = [res.data]
            })
        }
    }
}
</script>
<style >
.ivu-table {
    font-size: 16px;
}
.ivu-table .symbol-column {
    background: #ccc;
}
.green-color {
    color: green;
}
.red-color {
    color: red;
}
</style>
